<template>
  <!-- 登录页 -->
  <div class="login">
    <div class="box">
      <div class="login_title">开启移动塑料智能工作台</div>
      <div class="login_box">
        <div class="login_left">
          <div class="login_left_text">
            解决塑料生意难点<br />推动销售业绩增长
          </div>
        </div>
        <div class="login_right">
          <div class="login_right_title">优塑宝</div>
          <div class="login_right_text">用户操作系统</div>
          <div class="info">
            <div class="login_tab">
              <div
                @click="changeTab()"
                class="login_tab_box"
                :style="{
                  'border-bottom': tabChange
                    ? '#F42551 solid 4px'
                    : '#FFFFFF solid 4px',
                  color: tabChange ? '#F42551' : '#333333',
                }"
              >
                用户登录
              </div>
              <div
                @click="changeTab()"
                class="login_tab_box"
                :style="{
                  'border-bottom': tabChange
                    ? '#FFFFFF solid 4px'
                    : '#F42551 solid 4px',
                  color: tabChange ? '#333333' : '#F42551',
                }"
              >
                扫码登录
              </div>
            </div>
            <div v-if="tabChange == true">
              <div class="login_input">
                <el-input
                  placeholder="请输入账号"
                  v-model="userName"
                  class="login_el_input"
                ></el-input>
              </div>
              <div class="login_input">
                <el-input
                  placeholder="请输入密码"
                  v-model="password"
                  class="login_el_input"
                  show-password
                ></el-input>
              </div>
              <div class="login_remember">
                <div class="login_remember_left" @click="rememberPassword()">
                  <img
                    v-if="this.rememberIcon == false"
                    src="../../assets/login/btn_dl_nor@2x.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../../assets/login/btn_dl_sel@2x.png"
                    alt=""
                  />
                  <span>记住密码</span>
                </div>
                <span class="forget" @click="$router.push('resetPassword')"
                  >忘记密码</span
                >
              </div>
              <div class="login_btn">
                <button class="btn" @click="toLogin">登录</button>
              </div>
              <div
                class="register"
                @click="$router.replace({ name: 'register' })"
              >
                免费注册
              </div>
            </div>
            <div v-else>
              <div v-show="showQrcode">
                <div class="wx_login_img">
                  <wxlogin
                    :appid="'wx308aacb885fd598e'"
                    :scope="'snsapi_login'"
                    :theme="'black'"
                    :redirect_uri="
                      encodeURIComponent('https://www.yousubao-01.com/user/#/login')
                    "
                    :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAuc3RhdHVzLnN0YXR1c19icm93c2VyIHsKZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAucXJjb2RlIHsKYm9yZGVyOiBub25lOwp3aWR0aDogMjAwcHg7CmhlaWdodDogMjAwcHg7Cn0KLmltcG93ZXJCb3ggLnN0YXR1c3sKZGlzcGxheTogbm9uZQp9Ci5pbXBvd2VyQm94IC5pbmZvIHsKZGlzcGxheTpub25lCn0='"
                    rel="external nofollow"
                  >
                  </wxlogin>
                  <!-- <wxlogin
                :appid="'wx308aacb885fd598e'"
                :scope="'snsapi_login'"
                :theme="'black'"
                :redirect_uri="'http://www.yousubao-01.com' + '/user/#/login'"
                :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=='"
                rel="external nofollow"
              >
              </wxlogin> -->
                </div>
                <div class="test">
                  使用微信扫描二维码,<br />
                  点击进入【操作台】
                </div>
              </div>

              <div v-show="showInput">
                <div class="login_input">
                  <el-input
                    placeholder="请输入手机号码"
                    v-model="account"
                    class="login_el_input"
                  ></el-input>
                </div>
                <div class="login_input">
                  <el-input
                    placeholder="请输入验证码"
                    v-model="mobilecode"
                    class="login_el_input"
                  ></el-input>
                  <el-button
                    v-if="time == 0"
                    class="btn_code"
                    @click="getSmsCodeByAliyun"
                    >获取手机验证码</el-button
                  >
                  <el-button v-else class="btn_code"
                    >{{ time }}s后可重发</el-button
                  >
                </div>
                <div class="login_btn">
                  <button @click="submit" class="btn">确认登录</button>
                  <button @click="cancelLogin" class="btn">取消登录</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import wxlogin from "vue-wxlogin";
//import { userCode } from "@/api/login";
export default {
  components: {
    wxlogin,
  },
  data() {
    return {
      userName: "",
      password: "",
      code: "",
      tabChange: true,
      rememberIcon: false,
      wxCode: "111111111111111",
      account: "",
      mobilecode: "",
      loginInfo: {},
      showInput: false,
      showQrcode: true,
      loginState: "",
      time: 0,
    };
  },

  created() {
    let timestamp = sessionStorage.getItem("timestamp");
    // console.log(Date.now() - timestamp < 60 * 1000);
    if (Date.now() - timestamp < 60 * 1000) {
      this.time = 60 - parseInt((Date.now() - timestamp) / 1000);
      this.setCodeTimer();
    }
  },

  //监听路由可以检测返回的code
  watch: {
    $route: {
      handler() {
        // if (window.location.search.indexOf("code") != -1) {
        //   let a = location.href.split("?"); //拿取当前url 将url截开
        //   let c = a[1].split("&");
        //   var wxCode = c[0].split("=")[1]; //微信code值
        // }
        const wxCode = this.$route.query.code;
        console.log(wxCode);
        if (wxCode) {
          this.$nextTick(() => {
            this.tabChange = false;
          });
          let params = {
            code: wxCode,
          };
          this.$apiFun.userCode(params).then((res) => {
            this.loginInfo = res.result;
            this.loginState = res.result.status;
            // console.log("this.loginState", this.loginState);
            if (this.loginState) {
              this.showInput = true;
              this.showQrcode = false;
            } else {
              this.$message({
                type: "success",
                duration: 1500,
                message: "登录成功",
              });
              this.$cookies.set("you_su_bao", res.result.token);
              // this.$router.push("home");
              this.$router.replace({ path: "home" });
            }
          });
        }
      },
      immediate: true,
    },
    "$route.params.type": {
      handler(newName) {
        // console.log("newName");
        // console.log(newName);
        this.tabChange = newName == 1 ? false : true;
      },
      immediate: true,
      deep: true,
    },
  },

  mounted() {
    this.getCookie();
  },

  methods: {
    async toLogin() {
      let message = "";
      if (this.userName == "") {
        message = "手机号不能为空";
      } else if (!/^1[3456789]\d{9}$/.test(this.userName)) {
        message = "请输入正确的账号";
      } else if (this.password == "") {
        message = "密码不能为空";
      } else {
        let res = await this.$apiFun.toLogin({
          loginName: this.userName,
          loginPwd: this.password,
          type: "PC",
        });
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "登录成功",
          });

          this.$cookies.set("you_su_bao", res.result.token);
          this.$cookies.set("loginName", this.userName);
          // this.$cookies.set("loginPwd", this.password);s
          this.$router.push("home");
        }
      }

      if (message) {
        this.$message({
          type: "error",
          duration: 1500,
          message,
        });
      }
    },
    changeTab() {
      this.tabChange = !this.tabChange;
    },
    rememberPassword() {
      if (this.password == "") {
        // 密码为空
        this.$message.error("请先输入密码");
      } else if (this.password !== "") {
        this.rememberIcon = !this.rememberIcon;
        if (this.rememberIcon == true) {
          //勾选记住密码
          this.$cookies.set("loginPwd", this.password);
          this.$cookies.set("rememberState", this.rememberIcon);
        } else {
          this.$cookies.set("loginPwd", "");
          this.$cookies.set("rememberState", "");
        }
      }
    },

    setCodeTimer() {
      if (this.time == 0) {
        sessionStorage.setItem("timestamp", Date.now());
        this.time = 60;
      }

      let timer = setInterval(() => {
        this.time -= 1;
        if (this.time <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },

    // 阿里云验证码
    async getSmsCodeByAliyun() {
      if (this.account == "") {
        this.$message.error("手机号不能为空");
      } else {
        let res = await this.$apiFun.getSmsCodeByAliyun({
          mobile: this.account,
        });
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "获取成功",
          });
        } else {
          this.$message({
            type: "error",
            duration: 1500,
            message: "获取失败",
          });
        }
        this.setCodeTimer();
      }
    },

    // 扫码点击登录
    submit() {
      let params = {
        unionid: this.loginInfo.unionid,
        openId: this.loginInfo.openId,
        nickName: this.loginInfo.nickName,
        sex: this.loginInfo.sex,
        mobile: Number(this.account),
        MobileCode: this.mobilecode,
      };
      this.$apiFun.userCode(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "登录成功",
          });
          this.$cookies.set("you_su_bao", res.result.token);
          this.$router.push("home");
        }
      });
    },

    // 取消登录
    cancelLogin() {
      this.showInput = false;
      this.showQrcode = true;
    },

    // 读取cookie
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; ");

        for (var i = 0; i < arr.length; i++) {
          var cookieArr = arr[i].split("=");

          if (cookieArr[0] == "loginPwd") {
            this.password = cookieArr[1];
          }
          if (cookieArr[0] == "loginName") {
            this.userName = cookieArr[1];
          }
          if (cookieArr[0] == "rememberState") {
            this.rememberIcon = cookieArr[1];
          }
        }
      }
    },

    // 接口请求
    // 登录
    // async toLogin() {
    //   // https://www.jianshu.com/p/7f50b7a26e57
    //   let params = {
    //     loginName: 18899792417,
    //     loginPwd: 123456,
    //     pushClientid: ""
    //   }
    //   let res = await this.$apiFun.toLogin(JSON.stringify(params))
    //   this.$cookies.set("token", res.result.token)

    //   console.log(this.$cookies.get("token"))
    //   // @click="$router.push('/home')"
    // }
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  // width: 100%;
  // height: 100%;
  background: #efefef;
  .box {
    // width: 75%;
    // height: 66%;
    // padding: 150px 100px 80px 80px;
    width: 12.9725rem;
    height: 6.0718rem;
    padding: 1.5rem 1rem 0.8rem 0.8rem;
    background: url(../../assets/login/shadow_dl@2x.png);
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    .login_title {
      text-align: left;
      // font-size: 48px;
      font-size: 0.48rem;
      font-weight: bold;
      color: #333333;
    }
    .login_box {
      width: 100%;
      height: 100%;
      display: flex;
      .login_left {
        // width: 50%;
        // height: 90%;
        width: 7.1362rem;
        height: 5.465rem;
        background: url(../../assets/login/pic_dl@2x.png);
        background-size: 100% 100%;
        position: relative;
        .login_left_text {
          position: absolute;
          // top: 25px;
          // font-size: 32px;
          // line-height: 48px;
          top: 0.25rem;
          left: 0px;
          line-height: 0.48rem;
          font-size: 0.32rem;
          font-weight: 300;
          color: #333333;
        }
      }
      .login_right {
        flex: 1;
        // padding-top: 15px;
        padding-top: 0.15rem;
        .login_right_title {
          // font-size: 59px;
          font-size: 0.59rem;
          font-weight: normal;
          color: #333333;
          font-family: FANGZHENGDABIAOSONGJIANTI;
        }
        .login_right_text {
          // font-size: 16px;
          font-size: 0.16rem;
          font-weight: 400;
          color: #333333;
        }
        .info {
          .login_tab {
            // margin-top: 20px;
            margin-top: 0.2rem;
            display: flex;
            justify-content: center;
            .login_tab_box {
              // height: 35px;
              // width: 200px;
              // font-size: 22px;
              height: 0.35rem;
              width: 2rem;
              font-size: 0.22rem;
              font-weight: bold;
              cursor: pointer;
            }
          }
          .login_input {
            // margin-top: 20px;
            margin-top: 0.2rem;
            position: relative;
            .login_el_input {
              // width: 400px;
              // height: 40px;
              margin: 0 auto;
              display: block;
              width: 4rem;
              height: 0.4rem;
              /deep/ .el-input__inner {
                height: 100%;
                font-size: 0.14rem;
                // font-size: 14px;
                font-family: Microsoft YaHei;
              }
            }
            .el-button {
              position: absolute;
              top: 0;
              right: 1.25rem;
              width: 1.2rem;
              font-size: 0.16rem;
              font-weight: 400;
              text-decoration: underline;
              color: #f42551;
              border: none;
              background: transparent;
            }
          }
          .login_remember {
            display: flex;
            justify-content: space-between;
            margin: 0.2rem auto;
            width: 4rem;
            // margin: 20px auto;
            // width: 400px;
            span {
              font-size: 0.16rem;
              // font-size: 16px;
              font-weight: 400;
              color: #333333;
              cursor: pointer;
            }
            .login_remember_left {
              display: flex;
              align-content: center;
              img {
                width: 0.2rem;
                height: 0.2rem;
                // width: 20px;
                // height: 20px;
                cursor: pointer;
              }
              span {
                margin-left: 0.09rem;
                font-size: 0.16rem;
                //   margin-left: 9px;
                // font-size: 16px;
              }
            }
            .forget {
              // font-size: 16px;
              font-size: 0.16rem;
            }
          }
          .login_btn {
            height: 0.5rem;
            padding-top: 0.1rem;
            .btn {
              margin: 0.2rem auto 0;
              width: 4rem;
              height: 0.4rem;
              line-height: 0.4rem;
              font-size: 0.16rem;
              background: #f42551;
              border-radius: 5px;
              color: #fff;
              border: none;
              cursor: pointer;
              display: block;
            }
          }
          .register {
            margin-top: 0.2rem;
            font-size: 0.16rem;
            // margin-top: 20px;
            // font-size: 16px;
            font-weight: 400;
            color: #f42551;
            cursor: pointer;
          }
          #wx_login {
            width: 200px;
            height: 200px;
          }
          .test {
            // font-size: 18px;
            // line-height: 30px;
            // top: -190px; 
            font-size: 0.18rem;
            line-height: 0.3rem;
            top: -1.5rem;
            font-weight: 400;
            color: #333333;
            position: relative;
          }
        }
      }
    }
  }
}
</style>